/**
 *
 * @title 项目参照
 * @description
 *
 */

import React, {Component} from 'react';
import {Button, Modal, Table, Checkbox, FormControl, Icon} from 'tinper-bee';
import './index.less'
import {getProjectData} from './projectmodalconfig'
import {vendorsDanger,vendorsGetStorage} from 'utils/config.js';
export default class ProjectModal extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.columns =  [
            {
                title: '', dataIndex: "num", key: "num", width: '20%',
                render(text, record, index) {
                    return (
                        <Checkbox
                            checked={record.checkedFlag}
                            onChange={(e) => {
                                _me.checkboxChange(e, record.pkProject)
                            }}
                        />
                    )
                }
            },
            {title: "项目名称", dataIndex: "sname", key: "sname", width: '80%'},
        ];
        this.state = {
            searchValue: '',
            tableData: [],
            copyTableData:'',
            checkedPks: [],
            columns:this.columns
        };
    }
    componentWillReceiveProps(newProps){
        let singInRePageData = vendorsGetStorage('singInRePageData');
        if (singInRePageData) {
            let {detailFlag, stateParams} = vendorsGetStorage('singInRePageData');
            if (detailFlag) {

            } else {
                if(newProps.pkOrg!==this.props.pkOrg){
                    this.getProjectDataAction(newProps)
                }
            }
        } else {
            if(newProps.pkOrg!==this.props.pkOrg){
                this.getProjectDataAction(newProps)
            }
        }

    }
    getProjectDataAction=(newProps)=>{
        //获取页面初始值
        getProjectData({pkOrg: newProps.pkOrg}).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                this.props.saveModalTabledata(data.result);
                this.setState({
                    searchValue:'',
                    tableData: data.result,
                    copyTableData:JSON.stringify(data.result),
                    checkedPks:[]
                },()=>{
                    //缓存modal state
                    this.props.closeModel(this.state)
                })
            } else {
                vendorsDanger({'text': data.exMsg})
            }
        })
    };
    checkboxChange = (e, pk) => {
        let tableData = this.setCheckedtableData(e, pk, this.state.tableData).tableData;
        let modalListData = this.setCheckedtableData(e, pk, this.props.modalListData).tableData;
        this.props.saveModalTabledata(modalListData);
        let checkedPks = this.state.checkedPks;
        if(e&&checkedPks.indexOf(pk) === -1){
            checkedPks.push(pk)
        }
        if(!e){
            for (let i = 0; i < checkedPks.length; i++) {
                const checkedPk = checkedPks[i];
                if(checkedPk==pk){
                    checkedPks.splice(i,1);
                    i--
                }
            }
        }
        this.setState({
            tableData,
            checkedPks
        })
    };
    setCheckedtableData = (e, pk, tableData) => {
        let checkedfPks = [];
        let checkedProjectName = [];
        for (let i = 0; i < tableData.length; i++) {
            const tableDataItem = tableData[i];
            if (tableDataItem.pkProject == pk) {
                tableDataItem.checkedFlag = e
            }

            if (tableDataItem.checkedFlag) {
                checkedfPks.push(tableDataItem.pkProject);
                checkedProjectName.push(tableDataItem.sname)
            }
        }
        return {tableData, checkedPks: checkedfPks, checkedProjectName}
    };

    componentDidMount() {
        let singInRePageData = vendorsGetStorage('singInRePageData');
        if (singInRePageData) {
            let {detailFlag, stateParams} = vendorsGetStorage('singInRePageData');
            if (detailFlag) {
                let {curFlag,modelState} = stateParams;
                this.setState({
                    ...modelState,
                    columns:this.columns
                })
            } else {
                this.getProjectDataAction(this.props);
            }
        } else {
            this.getProjectDataAction(this.props);
        }
    }

    setRowKey = (record, index) => {
        return record.pkProject
    };
    handleClearInput = () => {
        this.setState({
            searchValue: '',
            // tableData:JSON.parse(this.state.copyTableData),
            tableData:this.props.modalListData
        })
    };
    handleSearchSubmit = (searchValue) => {
        let modalListData = this.props.modalListData;
        let filterData = modalListData.filter((item) => {
            return item.sname.indexOf(searchValue) > -1
        });
        this.setState({
            tableData: filterData
        })
    };
    handleChange = (e) => {
        this.setState({
            searchValue: e.target.value
        })
    };

    render() {
        let {showModal, closeModel, sureClick} = this.props;
        let {columns, tableData, searchValue,copyTableData} = this.state;
        return (

            <Modal
                show={showModal}
                onHide={()=>{
                    this.setState({
                        searchValue:'',
                        tableData:JSON.parse(copyTableData)
                    },()=>{
                        closeModel(this.state)
                    });

                }}>
                <div className='modal-project-confirm'>
                    <Modal.Header closeButton>
                        <Modal.Title>选择项目</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <div className='table-project-container'>
                            <div className="gcheader-search-container clearfix">
                                <FormControl
                                    type="text"
                                    placeholder='请输入项目名称'
                                    className='quality__search'
                                    onChange={this.handleChange}
                                    value={searchValue}
                                />
                                {searchValue ? <span
                                        className="clear-input-content"
                                        onClick={this.handleClearInput}
                                    >
                                                        x
                                                </span> :
                                    null}
                                <Button
                                    className='quality__btn btn_style_format'
                                    onClick={()=>{this.handleSearchSubmit(this.state.searchValue)}}
                                >
                                    <Icon type="uf-search-light-2"/>
                                </Button>
                            </div>
                            <Table
                                columns={columns}
                                data={tableData}
                                emptyText={() => '暂无数据'}
                                scroll={{y: 300}}
                                rowKey={this.setRowKey}
                            />
                        </div>
                    </Modal.Body>

                    <Modal.Footer>
                        <Button colors="primary" onClick={() => {
                            let {copyTableData,checkedPks} = this.state;
                            copyTableData = JSON.parse(copyTableData);
                            let checkProjectName = [];
                            copyTableData.map((item)=>{
                                if(checkedPks.indexOf(item.pkProject) > -1){
                                    item.checkedFlag = true;
                                    checkProjectName.push(item.sname)
                                }else {
                                    item.checkedFlag = false
                                }
                                return item
                            });
                            this.setState({
                                searchValue:'',
                                tableData:copyTableData,
                                copyTableData:JSON.stringify(copyTableData)
                            },()=>{
                                sureClick(checkProjectName,checkedPks);
                                closeModel(this.state)
                            });
                        }}>确认</Button>
                    </Modal.Footer>
                </div>
            </Modal>

        )
    }
}